<script setup>
import { computed } from 'vue'
import { ref, defineProps } from 'vue'

const emit = defineEmits(['update:selectRoleId', 'select'])
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  actives: {
    type: Array,
    default: () => [0],
  },
  selectRoleId: {
    type: Number,
    default: 0,
  },
})

const items = ref(props.data)
const keyword = ref('')
const activeNames = ref([])
const shows = ref({})
const activeTab = ref('list')

activeNames.value = items.value.map((item, index) => index)

const favorites = computed(() => {
  const data = []
  const kw = keyword.value
  props.data.forEach((cate) => {
    data.push(...cate.roles.filter((role) => role.favorite && role.name.includes(kw)))
  })
  return data
})

//搜索
const search = () => {
  let expands = []
  const kw = keyword.value
  items.value.forEach((item, index) => {
    let empty = true
    item.roles.forEach((role) => {
      shows.value[role.id] = role.name.includes(kw)
      if (shows.value[role.id]) empty = false
    })
    if (!empty) expands.push(index)
  })

  activeNames.value = expands
}

//点击
const clickItem = (role) => {
  emit('update:selectRoleId', role.id)
  emit('select', role)
}
</script>

<template>
  <div class="flex flex-col h-full space-y-2">
    <div class="list-type px-2 pt-2">
      <el-segmented
        v-model="activeTab"
        :options="[
          { label: '角色列表', value: 'list' },
          { label: '我的收藏', value: 'favorite' },
        ]"
      />
    </div>
    <div class="px-2">
      <el-input v-model="keyword" placeholder="搜索" @input="search" clearable>
        <template #prefix>
          <FontAwesomeIcon icon="search" />
        </template>
      </el-input>
    </div>
    <el-scrollbar class="flex-1 px-2" v-if="activeTab === 'list'">
      <el-collapse v-model="activeNames">
        <template v-for="(item, index) in items">
          <el-collapse-item :name="index" v-if="item.show !== false">
            <template #title>
              <div class="flex items-center space-x-1 ml-2">
                <div class="w-1 h-3.5 rounded-lg bg-[--el-color-primary]"></div>
                <span>{{ item.name }}</span>
              </div>
            </template>
            <div class="space-y-1 my-1">
              <div
                v-for="role in item.roles"
                v-show="shows[role.id] !== false"
                @click="clickItem(role)"
                :class="{ item: true, active: role.id === selectRoleId }"
              >
                <img class="w-10 h-10 rounded" :src="role.icon" alt="" />
                <div class="flex flex-col">
                  <div>{{ role.name }}</div>
                  <div class="text-xs text-[--el-text-color-secondary] line-clamp-1">
                    {{ role.intro }}
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </template>
      </el-collapse>
    </el-scrollbar>
    <div v-else class="px-2">
      <template v-for="role in favorites">
        <div @click="clickItem(role)" :class="{ item: true, active: role.id === selectRoleId }">
          <img class="w-10 h-10 rounded" :src="role.icon" alt="" />
          <div class="flex flex-col">
            <div class="text-sm">{{ role.name }}</div>
            <div class="text-xs text-[--el-text-color-secondary] line-clamp-1">
              {{ role.intro }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.list-type .el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: var(--el-fill-color-darker);
  width: 100%;
  height: 2rem;
}

:deep(.el-collapse) {
  @apply border-0 space-y-1;
}

:deep(.el-collapse-item__wrap) {
  @apply border-0;
}

:deep(.el-collapse-item__header) {
  @apply h-8 bg-[--el-fill-color] rounded border-0;
}

:deep(.el-collapse-item__content) {
  padding: 0;
}

.item {
  @apply flex items-center space-x-2 rounded py-2 px-2 cursor-pointer 
  hover:bg-[--el-fill-color-light];
}

.item.active {
  @apply bg-[--el-fill-color-dark];
}
</style>
